import { StyleSheet, Text, View, Dimensions, Image, TouchableOpacity } from 'react-native'
import React from 'react'
import { useRouter } from 'expo-router'
const AllTeatch = (props: any) => {

    const router = useRouter()

    const gotoDetail = (_id: string, mingname: string) => {
        router.push({
            pathname: '/zhcFile/doctorDetail',
            params: { _id, mingname }
        })
    }

    return (
        <View style={styles.content}>
            <Text style={styles.content_header}>全部讲师</Text>

            {props.teach.map((item: any, index: number) => {
                return (
                    <TouchableOpacity onPress={() => gotoDetail(item._id, item.mingname)} key={index} style={styles.item1}>
                        <View style={styles.item} >
                            <View style={styles.image}>
                                <Image
                                    source={{ uri: item.img }} //图片地址
                                    style={styles.image_Img}
                                ></Image>
                            </View>
                            <View style={styles.item_text}>
                                <Text style={styles.text}>
                                    <Text>
                                        {item.mingname}
                                    </Text>
                                    <Text style={{ marginLeft: 15 }}>
                                        {item.job}
                                    </Text>
                                </Text>
                                <Text style={styles.text}>
                                    {item.hospital}{item.department}
                                </Text>
                            </View>
                            <View style={styles.posite}>
                                <Text style={{ color: 'white', fontSize: 12 }}>
                                    {item.num}已学
                                </Text>
                            </View>
                        </View>
                    </TouchableOpacity>

                )
            })}
        </View >
    )
}

export default AllTeatch

const styles = StyleSheet.create({
    content: {
        width: Dimensions.get("window").width,
        padding: 20,
        backgroundColor: 'white',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        alignContent: 'space-around',
        flexDirection: 'row',
        // 最后一条数据始终在左边
        boxSizing: 'border-box'
    },
    content_header: {
        width: '100%',
        height: 40,
        // backgroundColor: 'white',
        lineHeight: 40,
        color: '#000',
        fontSize: 16,
        fontWeight: 'bold'
    },
    item1: {
        width: '42%',
        height: 160,
        marginHorizontal: 10,
        borderRadius: 10,
        marginTop: 20,
        boxSizing: 'border-box',
    },
    item: {
        width: '100%',
        height: 160,
        marginHorizontal: 10,
        borderRadius: 10,
        marginTop: 20,
        boxSizing: 'border-box',
    },
    image: {
        width: '100%',
        height: 120,
        textAlign: 'center',
    },
    image_Img: {
        width: '60%',
        height: '100%',
        marginLeft: '20%',
        boxSizing: 'border-box',
    },
    item_text: {
        width: '100%',
        height: 50,
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    text: {
        color: '#000',
        fontSize: 10,
    },
    posite: {
        width: '100%',
        position: 'absolute',
        bottom: 40,
        left: 0,
        height: 20,
        backgroundColor: 'rgba(0,0,0,0.3)',
        color: 'white',
        textAlign: 'center',
        lineHeight: 20,
        fontSize: 10,
    }
})